<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
const {proxy} = getCurrentInstance();
import Help from "@/components/debris/Help.vue";
import {createPermission, selectPermissionById,selectPermissionByCode, updatePermissionById} from "@/api/basal.js";
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
import {useRouter} from "vue-router";
const router = useRouter();
const formRef = ref(null)
const errorMessage = ref(null)
const form = reactive({createSystemCode: proxy.$route.query.systemCode,isEnable:true, id:proxy.$route.query.id,sort:0,
  permissionName:'',permissionCode:'',permissionSignboard:''});
onMounted(() => {
  onLoad( proxy.$route.query.systemCode,proxy.$route.query.id)
})
const permissionCodePass = ref(true)
async function onLoad(systemCode,id){
  if(id && systemCode){
    let result = await selectPermissionById(systemCode,id);
    if(result.code === ResultEnums.SUCCESS ){
      const data = result.data
      for(const key in data){
        form[key] = data[key]
      }
    }
  }
}

function confirm(e){
  e.preventDefault();
  if (formRef.value.checkValidity() && permissionCodePass.value) {
    if(form.id){ invokeUpdate(form.createSystemCode,form.id,form)} else { invokeInsert(form) }
  } else {
    formRef.value.reportValidity();
  }
}

async function validationPermissionCode(systemCode,roleCode,id){
  const result = await selectPermissionByCode(systemCode,roleCode)
  if(result.code === ResultEnums.SUCCESS){
    const role = result.data
    if(role){
      permissionCodePass.value = (role.id === id)
    }else {
      permissionCodePass.value = true
    }
  }else {
    permissionCodePass.value = true
  }
}

async function invokeInsert(obj){
  const result = await createPermission(obj)
  if(result.code === ResultEnums.SUCCESS ){
    router.go(-1);
  }else {
    errorMessage.value = result.message;
  }
}

async function invokeUpdate(systemCode,id,obj){
  const result = await updatePermissionById(systemCode,id,obj)
  if(result.code === ResultEnums.SUCCESS ){
    router.go(-1);
  }else {
    errorMessage.value = result.message;
  }
}
</script>

<template>
  <h1 class="app-page-title" v-if="proxy.$route.meta">
    <a href="#" @click="(e)=>{e.preventDefault();router.go(-1);}"> <i class="bi bi-reply-all"></i></a> {{ proxy.$route.meta.theme }}
  </h1>
  <hr class="mb-4">
  <div class="row g-4 settings-section">
    <div class="app-card app-card-settings shadow-sm p-4">

      <div class="app-card-body">
        <form class="settings-form" ref="formRef">
          <div class="mb-3">
            <label for="setting-input-1" class="form-label">权限名称</label>
            <input type="text" class="form-control" v-model="form.permissionName" required>
          </div>
          <div class="mb-3">
            <label for="setting-input-1" class="form-label">权限编码</label>
            <input type="text" class="form-control" :class="permissionCodePass||' is-invalid '" @blur="validationPermissionCode(form.createSystemCode,form.permissionCode,form.id)"
                   aria-describedby="validationPermissionCode" v-model="form.permissionCode" required>
            <div id="validationPermissionCode" class="invalid-feedback" v-if="!permissionCodePass">
              权限编码已存在,请修改后重试
            </div>
          </div>
          <div class="mb-3">
            <label for="setting-input-6" class="form-label">权限分组</label>
            <input type="text"  class="form-control" id="setting-input-6" v-model="form.permissionSignboard" maxlength="100"></input>
          </div>
          <div class="mb-3">
            <label for="setting-input-7" class="form-label">权限排序</label>
            <input type="number" class="form-control" id="setting-input-7" v-model="form.sort" required>
          </div>
          <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" id="settings-switch-8" v-model="form.isEnable">
            <label class="form-check-label" for="settings-switch-8">启用</label>
          </div>
          <Transition v-if="errorMessage">
            <div class="alert alert-warning alert-dismissible fade" :class="errorMessage&&' show '" role="alert">
              <strong>错误提示!</strong> {{ errorMessage }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          </Transition>
          <button type="submit" class="btn app-btn-primary" @click="confirm">确认</button>
        </form>
      </div><!--//app-card-body-->

    </div><!--//app-card-->
  </div><!--//row-->
</template>